<template>
  <el-dialog
    v-model="visible"
    title="标签名称"
    width="400"
    draggable
    @close="close"
    :z-index="2000"
  >
    <template #default>
      <el-form label-width="80" label-position="left">
        <el-form-item label="标签名称">
          <el-input v-if="tagType == 'edit'" v-model="form.custom_tag"></el-input>
          <div class="flex" v-else>
            <el-select
              class="w-full"
              v-model="form.custom_tag_list"
              filterable
              allow-create
              default-first-option
              :reserve-keyword="false"
              placeholder="请输入或选择"
              clearable
              multiple
              collapse-tags
              @change="changeCustomTag"
            >
              <el-option
                v-for="item in options"
                :key="item.tag_name"
                :label="item.tag_name"
                :value="item.tag_name"
              />
            </el-select>
            <el-button type="primary" text @click="handleAllChecked">全选</el-button>
          </div>
        </el-form-item>
        <el-form-item label="语言">
          <SelectLanguage
            class="w-[205px]"
            v-model="form.language_id"
            @changeItem="changeLanguage"
          ></SelectLanguage>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="AuditModal">
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { getImageTag } from "@/api/index";
import SelectLanguage from "@/components/Selects/SelectLanguage/index.vue";
const emit = defineEmits(["add", "edit"]);

let galleryList = reactive(inject("galleryList"));

const data = reactive({
  visible: false,
  loading: false,
  options: [],
  tagType: "",
  form: {},
});
const { visible, loading, options, tagType, form } = toRefs(data);
const open = (type, item) => {
  tagType.value = type;
  if (type == "edit") {
    form.value = item;
    form.value.old_custom_tag = item.custom_tag;
  }
  getList();
  visible.value = true;
};

const getList = async () => {
  try {
    const res = await getImageTag({
      userId: window.userInfo.user.user_id,
      tagType: 3,
    });
    options.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};

const save = () => {
  if (tagType.value == "add") {
    if (!form.value.custom_tag_list.length) {
      ElMessage.error("标签名称不能为空");
      return;
    }

    const formData = Object.assign({}, form.value);
    formData.custom_tag_list = formData.custom_tag_list
      .filter((i) => {
        if (!galleryList.value.some((item) => item.custom_tag == i)) {
          return i;
        }
      })
      .map((i) => {
        return {
          custom_tag: i,
          language_id: formData.language_id,
          language_code: formData.language_code,
          language_id_text: formData.language_id_text,
        };
      });

    if (!formData.custom_tag_list.length) {
      ElMessage.error("所选标签名称已存在，请选择或者输入其他名称");
      return;
    }
    emit("add", formData);
    close();
  } else if (tagType.value == "edit") {
    if (!form.value.custom_tag) {
      ElMessage.error("标签名称不能为空");
      return;
    }
    if (
      galleryList.value
        .filter((i) => !i.delete && i.custom_tag !== form.value.old_custom_tag)
        .some((item) => item.custom_tag === form.value.custom_tag)
    ) {
      return ElMessage.error("标签名称已存在，请修改标签名称");
    }
    emit("edit", form.value);
    close();
  }
};
const close = () => {
  form.value = {};
  visible.value = false;
};

const changeLanguage = (item) => {
  form.value.language_code = item.short_name;
  form.value.language_id_text = item.name;
};

const changeCustomTag = (val) => {
  if (val.length == 1) {
    const find = options.value.find((i) => i.tag_name == val[0]);
    if (find?.language_id) {
      form.value.language_id = find?.language_id;
    }
  }
};

// 全选
const handleAllChecked = () => {
  const formData = Object.assign({}, form.value);
  formData.custom_tag_list = options.value
    .filter((i) => {
      if (!galleryList.value.some((item) => item.custom_tag == i.tag_name)) {
        return i;
      }
    })
    .map((i) => {
      return {
        custom_tag: i.tag_name,
        language_id: i.language_id,
        language_code: i.language_code,
        language_id_text: i.language_id_text,
      };
    });

  if (!formData.custom_tag_list.length) {
    ElMessage.error("所选标签名称已存在，请选择或者输入其他名称");
    return;
  }
  emit("add", formData);
  close();
};
defineExpose({ open });
</script>
